<template>
  <div>
    <el-row :gutter="20" class="mgb20">
      <el-col :span="6">
        <el-card>
          <div class="grid-content">
            <div class="grid-content-center">
              <div class="grid-num">{{ consumerCount }}</div>
              <div>用户总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="grid-content">
            <div class="grid-content-center">
              <div class="grid-num">{{ songCount }}</div>
              <div>歌曲数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="grid-content">
            <div class="grid-content-center">
              <div class="grid-num">{{ singerCount }}</div>
              <div>歌手数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="grid-content">
            <div class="grid-content-center">
              <div class="grid-num">{{ songListCount }}</div>
              <div>歌单数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";
import {
  consumerCount,
  songListCount,
  singerCount,
  songCount,
} from "../api/index";
export default {
  data() {
    return {
      boy: 0,
      girl: 0,
      dog: 0,
      //用户总数
      consumerCount: 0,
      //歌曲总数
      songCount: 0,
      //歌手总数
      singerCount: 0,
      //歌单总数
      songListCount: 0,
      //按性别分类的用户数
      consumerSex: {
        colums: ["性别", "总数"],
        row: [
          { 性别: "男", 总数: 0 },
          { 性别: "女", 总数: 0 },
          { 性别: "保密", 总数: 0 },
        ],
      },
    };
  },
  created() {},
  mounted() {
    this.ConsumerCount();
    this.SingerCount();
    this.SongCount();
    this.SongListCount();
  },
  methods: {
    //用户数量
    ConsumerCount() {
      consumerCount().then((res) => {
        this.consumerCount = res;
      });
    },
    //用户性别数量
    ConsumerSexCount() {
      consumerGirlCount().then((res) => {
        this.girl = res;
      });
      consumerBoyCount().then((res) => {
        this.boy = res;
      });
      consumerDogCount().then((res) => {
        this.dog = res;
      });
      this.consumerSex.row[0]["总数"] = this.boy;
      this.consumerSex.row[1]["总数"] = this.girl;
      this.consumerSex.row[2]["总数"] = this.dog;
    },
    //歌手数量
    SingerCount() {
      singerCount().then((res) => {
        this.singerCount = res;
      });
    },
    //歌曲数量
    SongCount() {
      songCount().then((res) => {
        this.songCount = res;
      });
    },
    //歌单数量
    SongListCount() {
      songListCount().then((res) => {
        this.songListCount = res;
      });
    },
  },
};
</script>


<style scoped>
.grid-content {
  display: flex;
  align-items: center;
  height: 50px;
}
.grid-content-center {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: darkgray;
}
.grid-num {
  font-size: 30px;
  font-weight: bold;
}
</style>